<template>
	<view class="container">
		<navbar title="我的" :background="background" :showBack="false" :color='titleColor'></navbar>
		<view class="user-bg">
			<image src='/static/user-bg.png'></image>
		</view>
		<view class="wrap">
			<view class="user-wrap line-v-center" v-if='Authorization'>
				<view class="user-img">
					<!-- 用户头像 -->
					<image src='/static/user/user-default.png' v-if='!userInfo.avatar'></image>
					<image :src='userInfo.avatar' v-else></image>
				</view>
				<view class="user-name-wrap">
					<!-- 用户名称显示 -->
					<template>
						<view class="user-name ellipsis">{{userInfo.nickname}}</view>
					</template>
				</view>
				<view class="setting" @tap="toAuthUser">
					<image src='/static/user/set.png'></image>
				</view>
			</view>
			<view class="user-wrap line-v-center" v-else @tap="toLogin">
				<view class="user-img">
					<image src='/static/user/user-default.png'></image>
				</view>
				<view class="user-name-wrap">
					<view class="user-login">
						去登录<uni-icons type="forward" color="#060201" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view class="base-wrap order-wrap">
				<view class="title-wrap line-v-center">
					<view class="title">我的订单</view>
					<view class="more line-v-center" @tap='toOrderPage("all")'>
						全部订单<uni-icons type='forward' color="#A7A8AF"></uni-icons>
					</view>
				</view>
				<view class="order-con">
					<view class="order-item" v-for='(item,index) in orderList' @tap='toOrderPage(item.type)'>
						<uni-badge size="small" class="uni-badge-left-margin" :text="item.num" absolute="rightTop" type="error"
							:customStyle="{background: '#FF5A40'}">
							<view class="order-icon">
								<image :src='item.icon'></image>
							</view>
						</uni-badge>

						<view class="order-text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="base-wrap tool-wrap">
				<view class="tool-item" @tap='jumpToolPage(0)'>
					<image src='/static/user/coupon-cnetr.png'></image>
					<view class="tool-item-con">
						<view class="title">领券中心</view>
						<view class="btn">领券</view>
					</view>
				</view>
				<view class="tool-item" @tap='jumpToolPage(1)'>
					<image src='/static/user/tui-center.png'></image>
					<view class="tool-item-con">
						<view class="title">推广中心</view>
						<template v-if='Authorization'>
							<template v-if='userInfo.is_share == 0'>
								<view class="btn btn1" v-if='userInfo.share_status == -1'>去申请</view>
								<view class="btn btn1" v-if='userInfo.share_status == 0'>审核中</view>
								<view class="btn btn1" v-if='userInfo.share_status == 2'>未通过,重新申请</view>
							</template>
							<template v-else>
								<view class="btn btn1" v-if='userInfo.share_status == 1'>查看</view>
								<view class="btn btn1" v-if='userInfo.share_status == 2'>未通过,重新申请</view>
							</template>
						</template>
						<template v-else>
							<view class="btn btn1">查看</view>
						</template>
					</view>
				</view>
			</view>
			<view class="base-wrap else-wrap">
				<view class="title-wrap line-v-center">
					<view class="title">常用功能</view>
				</view>
				<view class="else-con">
					<view class="else-item" v-for='(item,index) in elseList' @tap='toBasePage(index)'>
						<view class="else-icon">
							<image :src='item.icon'></image>
						</view>
						<view class="else-text">{{item.name}}</view>
					</view>
					<view class="else-item" @tap='loginOut' v-if='Authorization'>
						<view class="else-icon">
							<image src='/static/user/tuichu.png'></image>
						</view>
						<view class="else-text">退出账号</view>
					</view>
				</view>
			</view>
		</view>
		<improve-user :showModal="showUserModal" @close='close' ref='updateUser'></improve-user>
	</view>
</template>

<script>
	import improveUser from '../../../components/improve-user/improve-user.vue';
	const app = getApp()
	export default {
		components: {
			improveUser,
		},
		data() {
			return {
				Authorization: '',
				background: 'transparent',
				titleColor: 'rgba(255,255,255,0)',
				paaddingTop: app.globalData.headAllHeight,
				userInfo: {},
				showUserModal: false,
				token:'',
				orderList: [{
						name: '待发货',
						icon: '/static/user/daipeisong1.png',
						type: 'delivery',
						num:0,
					},
					{
						name: '待收货',
						icon: '/static/user/peisonfzhong1.png',
						type: 'received',
						num:0,
					},
					{
						name: '评价',
						icon: '/static/user/pingjia1.png',
						type: 'comment',
						num:0,
					},
					{
						name: '售后',
						icon: '/static/user/shouhou1.png',
						type: 'afterSale',
						num:0,
					},
					{
						name: '已完成',
						icon: '/static/user/yiwancheng1.png',
						type: 'completed'
					},
				],
				elseList: [{
						name: '我的优惠券',
						icon: '/static/user/youhuiquan.png',
						path: '/pages/coupon-page/my-coupon/my-coupon',
						id: 1,
					},
					{
						name: '收货地址',
						icon: '/static/user/dizhi.png',
						path: '/pages/user-page/address-list/address-list',
						id: 2,
					},
					{
						name: '我的收藏',
						icon: '/static/user/shoucang.png',
						path: '/pages/user-page/my-collect-foot/my-collect-foot?type=0',
						id: 3,
					},
					{
						name: '我的足迹',
						icon: '/static/user/zuji.png',
						path: '/pages/user-page/my-collect-foot/my-collect-foot?type=1',
						id: 4,
					},
					{
						name: '我的客服',
						icon: '/static/user/concat.png',
						path: '',
						id: 7,
					},
					/* {
						name: '找货服务',
						icon: '/static/user/zhaohuo.png',
						path: '/pages/user-page/search-goods/search-goods',
						id: 5,
					},
					{
						name: '金融服务',
						icon: '/static/user/jinrong.png',
						path: '/pages/user-page/finace/finace',
						id: 6,
					}, */
				]
			};
		},
		onShow() {
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			console.log('this.Authorization', this.Authorization)
			this.getUserInfo()
			this.getOrderNums()
		},
		onLoad() {

		},
		onPullDownRefresh() {
			this.userInfo = {};
			this.getUserInfo();
			uni.stopPullDownRefresh()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 0) {
						that.userInfo = res.data;
						if (!res.data.avatar) {
							this.showUserModal = true;
						}
					} else if (res.code == 101) {
						that.Authorization = ''
					}
				}).catch(err => {

				})
			},
			//获取订单数量
			getOrderNums(){
				let that = this;
				app.globalRequest({
					api: app.getApi().order.showOrderNums,
				}).then(res => {
					if (res.code == 0) {
						that.orderList[0].num = res.data.deliveryOrderNum;
						that.orderList[1].num = res.data.receivedOrderNum;
						that.orderList[2].num = res.data.commentOrderNum;
						that.orderList[3].num = res.data.refundOrderNum;
					}
				}).catch(err => {
				
				})
			},
			toAuthUser() {
				this.showUserModal = true;
				this.$refs.updateUser.avatarUrl = this.userInfo.avatar;
				this.$refs.updateUser.nickName = this.userInfo.nickname;
			},
			toOrderPage(type) {
				let orderList = this.orderList;
				if (!this.Authorization) {
					this.toLogin();
					return;
				}
				if (type == 'afterSale') {
					uni.navigateTo({
						url: '/pages/after-sale-page/after-sale-list/after-sale-list'
					})
				} else {
					uni.navigateTo({
						url: `/pages/user-page/my-order/my-order?type=${type}`
					})
				}
			},
			getCustomer() {
				app.globalRequest({
					api: app.getApi().user.customer,
				}).then(res => {
					if (res.code == 0) {
						this.customer = res.data;
						wx.openCustomerServiceChat({
							extInfo: {
								url: res.data.link_url
							},
							corpId: 'wwa5777f4dca0241d0', // 替换为你的企业ID
							success(res) {
								console.log('成功打开客服聊天界面');
							},
							fail(err) {
								uni.showToast({
									title: '打开客服聊天界面失败',
									icon: 'none'
								})
								console.log('打开客服聊天界面失败', err);
							}
						});
					}
				})
			},
			toBasePage(index) {
				const that = this;
				if (!this.Authorization) {
					this.toLogin();
					return;
				}
				let elseList = this.elseList;
				if (elseList[index].id == 7) {
					this.getCustomer();
					return;
				}
				uni.navigateTo({
					url: elseList[index].path
				})
			},
			jumpToolPage(index) {
				const that = this;
				let userInfo = this.userInfo;
				if (!this.Authorization) {
					this.toLogin();
					return;
				}
				let path = '';
				switch (Number(index)) {
					case 0:
						path = '/pages/coupon-page/coupon/coupon';
						uni.navigateTo({
							url: path
						})
						break;
					case 1:
						app.globalRequest({
							api:app.getApi().promotion.shareOpen
						}).then(res=>{
							if(res.code == 0){
								if(res.data == 2){
									uni.showToast({
										title: '分销暂未开启...',
										icon: 'none',
										mask: true
									})
									return;
								}
								if (userInfo.is_share == 1) {
									if (userInfo.share_status == 1) {
										path = '/pages/promotion-page/promotion-center/promotion-center';
									} else if (userInfo.share_status == 2) {
										path = '/pages/promotion-page/apply/apply';
									}
								} else {
									if (userInfo.share_status == -1 || userInfo.share_status == 2) {
										path = '/pages/promotion-page/apply/apply';
									} else if (userInfo.share_status == 0) {
										uni.showToast({
											title: '分销商审核中...',
											icon: 'none',
											mask: true
										})
									}
								}
								uni.navigateTo({
									url: path
								})
							}
						})
						break;
				}
			},
			loginOut() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					confirmColor: '#5DC751',
					success(res) {
						if (res.confirm) {
							uni.clearStorage();
							that.Authorization = '';
							that.orderList.forEach(v=>{
								v.num = 0
							})
							uni.showToast({
								title: '退出登录成功',
								duration: 2000
							})
						}
					}
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login-page/login/login'
				})
			},
			close() {
				this.getUserInfo()
				this.showUserModal = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.user-bg {
		width: 100%;
		height: 468rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.wrap {
		position: relative;

	}

	.user-wrap {
		padding: 0 24rpx;
		justify-content: space-between;

		.user-img {
			width: 128rpx;
			height: 128rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.01);
			border-radius: 100%;
			overflow: hidden;
			margin-right: 28rpx;
		}

		.user-name-wrap {
			flex: 1;
			overflow: hidden;
			color: #060201;
			margin-right: 20rpx;

			.user-name {
				font-weight: bold;
				width: 100%;
			}

			.no-auth {
				min-width: 138rpx;
				height: 44rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 22rpx;
				color: $supplier-main-color;
				margin-top: 16rpx;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.user-identify-wrap {
				.user-identify-icon {
					width: 36rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			.user-login {
				font-size: 32rpx;
				font-weight: bold;
			}

		}

		.setting {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.base-wrap {
		margin: 0 24rpx;
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;

		.title-wrap {
			justify-content: space-between;
		}

		.title {
			font-weight: bold;
			font-size: 32rpx;
		}

		.more {
			color: #A7A8AF;

			.uv-icon {
				margin-top: 4rpx;
			}
		}
	}

	.order-wrap {
		margin-top: 36rpx;

		.order-con {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.order-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				
			}
			.order-icon {
				width: 48rpx;
				height: 48rpx;
				margin: auto;
			}

			.order-text {
				padding-top: 10rpx;
				text-align: center;
			}
		}
	}

	.tool-wrap {
		margin-top: 24rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24rpx;

		.tool-item {
			width: 100%;
			height: 176rpx;
			position: relative;

			.tool-item-con {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				padding: 30rpx 20rpx 0 20rpx;
				box-sizing: border-box;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					line-height: 48rpx;
				}

				.btn {
					min-width: 96rpx;
					height: 36rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					background: $supplier-btn-sub-linear-color;
					border-radius: 18rpx;
					color: #fff;
					font-size: 24rpx;
					margin-top: 30rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}

				.btn1 {
					background: linear-gradient(90deg, #2FCAFE 0%, #138DFC 100%);
				}
			}
		}
	}

	.else-wrap {
		margin-top: 24rpx;

		.else-con {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			margin-top: 32rpx;
			row-gap: 52rpx;

			.else-item {
				width: 100%;
				text-align: center;
			}

			.else-icon {
				width: 40rpx;
				height: 40rpx;
				margin: auto;
			}

			.else-text {
				padding-top: 20rpx;
			}
		}
	}
</style>